
<template>
  <div>
    <transition name="LtoR">
      <div class="loginBox absolute fixedCenter" style="height:480px;" v-show="whoShow==1">
        <Logo title="欢迎登录服务猫"/>

        
        <Input type="number" v-model="mobile" @on-change="ttxT" 
        onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
        placeholder="请输入手机号" class="marginB20 " ref="mobile" clearable size="large" @on-enter="checkFun"	>
          <!-- <Icon type="md-person" slot="prefix" /> -->
        </Input>
        <Input type="password" v-model="password" placeholder="请输入密码" class="marginB20" size="large"  ref="password" @on-enter="checkFun" clearable>
          <!-- <Icon type="md-lock" slot="prefix" /> -->
        </Input>

        <Checkbox v-model="checkP" class="f_14 c999 marginB20">自动登录</Checkbox>
        <Button type="primary" class="btnGo marginB20" size="large" long  @click="checkFun">登 录</Button>
        <!-- <Button type="success" class="marginB10" size="large" ghost long  @click="wxLogin" >
          <i class="iconfont iconweixinzhifu2 relative f_24 inlineBlock" style="margin-top:-5px; top:3px;"></i>
          扫码登录
        </Button> -->
        <Row class="marginT20 textCenter f_16">
          <Col span="8" ><span class="textLink" @click="sendFa(4)">立即注册</span></Col>
          <Col span="8" ><span class="textLink" @click="sendFa(3)">忘记密码</span></Col>
          <Col span="8" ><span class="textLink" @click="sendFa(2)">短信登录</span></Col>
        </Row>
      </div>
    </transition>
  </div>
</template>



<script>
import Logo from './_logo';//logo
export default {
  components: {
    Logo
  },
  data () {
    let data={
      mobile:'',
      password:'',

      phoneOk:true,//手机：false不能登录 ，true可以登录

      checkP:false,//自动登录，token 存local
    };
    return data;
  },
  //父=》子，接收父亲的值； 1账号密码/2手机短信/3忘记密码/4新用户注册
  props:['whoShow'],
  mounted(){
    if(!$app.apiWhere){
      this.$Message.success({content:'这里是测试环境~'});
    }
  },
  methods: {
    sendFa(num){
      //自定义方法往父传值
      this.$emit('getChildData',num);
    },
    //失去焦点判断
    ttxT(){
      let that=this;
      $app.ttxT(2,that);//type：1注册用；2登录+修改密码用
    },
    checkFun(){
      let {mobile,password,phoneOk}=this;

      if(!$app.telCheck(mobile)){
        this.$Message.error({content:'请输入正确的手机格式，勿含空格等特殊字符'});
        this.$refs['mobile'].focus();
      }else if(!phoneOk){
        this.$Message.error({ content: '该手机号未注册' });
        this.$refs['mobile'].focus();
      }else if(!$app.judgeData(password)){
        this.$refs['password'].focus();
        this.$Message.error({content:'密码不能为空'});
      }else{
        this.goFun();
      }
      
    },
    //提交
    goFun () {
      let that=this;
      
      let {
        mobile,password,checkP,
        $route:{
          query:{
            globalUrl
          }
        }
      }=that;

      $ajax.loginP(mobile,password,(resData)=>{
				$app.saveToken(globalUrl,resData,checkP,true);//存token
      },that);

    },

    //调起微信二维码
    wxLogin(){
      $ajax.wechat_qrCodeLogin(({url})=>{
        // 跳去登录页
        window.location = url;
      });
    },
  }
}
</script>

<style>

</style>
